<template>
  <el-dialog
    ref="refDlg"
    v-el-drag-dialog
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="600px"
    append-to-body
    @close="closeDialog"
  >
    <div slot="title">
      <strong>移动到 <span style="color:#13ce66">{{ selecteName }}</span></strong>
    </div>
    <div class="tree-container">
      <el-tree
        class="my-tree"
        :data="treeData"
        :props=" {
          children: 'childrenCategorys',
          label: 'categoryName'
        }"
        node-key="id"
        :expand-on-click-node="true"
        :accordion="false"
        :default-expand-all="true"
        check-on-click-node
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <span :class="{'active':selectedId===data.id}">{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button v-if="treeData.length" v-preventReClick v-loading="submiting" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { removeContent } from '@/api/content'
export default {
  name: 'HelpContentMove',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    ids: {
      type: Array,
      default: () => []
    },
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      submiting: false,
      selectedId: '', // 已选择类目Id
      selecteName: '' // 已选择类目名称
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {

  },

  methods: {
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.selectedId = ''
      this.selecteName = ''
      done && done()
    },
    handleNodeClick(data, node, el) {
      if (!node.isLeaf) {
        this.$message({
          message: '请选择末级目录进行移动',
          type: 'warning'
        })
        return
      }
      this.selectedId = data.id
      this.selecteName = data.categoryName
    },
    // 保存
    submitForm() {
      if (!this.selectedId) {
        this.$message({
          message: '请选择类目',
          type: 'warning'
        })
        return
      }
      if (this.submiting) return
      const params = {
        ids: this.ids,
        categoryId: this.selectedId
      }
      this.submiting = true
      removeContent(params).then(res => {
        this.submiting = false
        if (res.success === 1) {
          this.$message({
            message: res.msg || '保存成功',
            type: 'success'
          })
          this.$emit('success')
          this.closeDialog()
        }
      }).catch(() => {
        this.submiting = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
/deep/ .el-dialog__body{
  max-height: 68vh;
  overflow-y: auto;
}
.tree-container{
  min-height: 300px;
}
.custom-tree-node{
  .active{
    color: $--color-primary;
    font-weight: bold;
  }
}
</style>
